/* eslint-disable no-undef */
const {Area, Bullet, Pie} = G2Plot
const {Chart} = G2

// 渲染顶部收入图表
export const renderIncome = container => {
  fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
  .then(res => res.json())
  .then(data => {
    const area = new Area(container, {
      data,
      xField: 'Date',
      yField: 'scales',
      xAxis: {range: [0, 1], tickCount: 5},
      areaStyle: () => ({fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'})
    })
    area.render()
  })
}

// 渲染客户数
export const renderCustomers = container => {
  const customerData = [
    {type: '3月', value: 2654, percent: 0.4},
    {type: '4月', value: 3654, percent: 0.02},
    {type: '5月', value: 4400, percent: 0.2},
    {type: '6月', value: 5300, percent: 0.24},
    {type: '7月', value: 6200, percent: 0.28},
    {type: '8月', value: 3300, percent: 0.14},
    {type: '9月', value: 1500, percent: 0.06},
  ]
  const chart = new Chart({
    container,
    autoFit: true,
    height: 500,
    padding: [50, 20, 50, 20],
  })
  chart.data(customerData)
  chart.scale('value', {alias: '总数'})
  chart.axis('type', {tickLine: {alignTick: false}})
  chart.axis('value', false)
  chart.tooltip({showMarkers: false})
  chart.interval().position('type*value')
  chart.interaction('element-active')
  // 添加文本标注
  customerData.forEach((item) => {
    chart.annotation().text({
      position: [item.type, item.value],
      content: item.value,
      style: {textAlign: 'center'},
      offsetY: -30,
    }).text({
      position: [item.type, item.value],
      content: (item.percent * 100).toFixed(0) + '%',
      style: {textAlign: 'center'},
      offsetY: -12,
    })
  })
  chart.render()
}

// 渲染好评数
export const renderRate = container => {
  const data = [{title: '满意度', ranges: [40, 70, 100], measures: [30, 50], target: 85}]
  const bulletPlot = new Bullet(container, {
    data,
    measureField: 'measures',
    rangeField: 'ranges',
    targetField: 'target',
    xField: 'title',
    color: {
      range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
      measure: ['#5B8FF9', '#61DDAA'],
      target: '#39a3f4',
    },
    label: {measure: {position: 'middle',style: {fill: '#fff'}}},
    xAxis: {line: null},
    yAxis: false,
    tooltip: {showMarkers: false, shared: true},
    // 自定义 legend
    legend: {
      custom: true,
      position: 'bottom',
      items: [
        {value: '差',  name: '差', marker: {symbol: 'square', style: {fill: '#FFbcb8', r: 5}}},
        {value: '良', name: '良', marker: {symbol: 'square', style: {fill: '#FFe0b0', r: 5}}},
        {value: '优', name: '优', marker: {symbol: 'square', style: {fill: '#bfeec8', r: 5}}},
        {value: '第一季度', name: '第一季度', marker: {symbol: 'square', style: {fill: '#5B8FF9', r: 5}}},
        {value: '第二季度', name: '第二季度', marker: {symbol: 'square', style: {fill: ' #61DDAA', r: 5 }}},
        {value: '目标值', name: '目标值', marker: {symbol: 'line', style: {stroke: '#39a3f4', r: 5}}},
      ]
    }
  })
  
  bulletPlot.render()
}

// 渲染已售出
export const renderSoldOut = container => {
  const data = [
    {type: '男生上衣', value: 27},
    {type: '七分裤', value: 25},
    {type: '包包', value: 18},
    {type: '休闲鞋', value: 15},
    {type: '连衣裙', value: 10},
    {type: '其他', value: 5},
  ]
  const piePlot = new Pie(container, {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {type: 'outer', content: '{name} {percentage}'},
    interactions: [{type: 'pie-legend-active'}, {type: 'element-active'}],
  })
  piePlot.render()
}